<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">tab 标签页</view>
			<view class="tui-page__desc">可超出一屏滚动，可自定义颜色，字体大小等</view>
		</view>
		<view class="tui-page__bd ">
			<view class="tui-tabs__spacing">
				<tui-tab :tabs="tabs" scroll @change="change"></tui-tab>
			</view>
			<view class="tui-tabs__spacing">
				<tui-tab :tabs="tabs2"></tui-tab>
			</view>
			<view class="tui-tabs__spacing">
				<tui-tab :tabs="tabs2" :size="30" bold color="#999" selectedColor="#07c160" sliderBgColor="#07c160"></tui-tab>
			</view>
			
			<view class="tui-tabs__spacing tui-padding">
				<view class="tui-inner__box">
					<tui-tab :leftGap="80" :tabs="tabs2" :size="30" bold color="#999" selectedColor="#07c160" sliderBgColor="#07c160"></tui-tab>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabs:['推荐','食品','水果蔬菜','新款男装','内衣','女装','百货','医药','手机','鞋包'],
			tabs2:['主页','视频','小视频','相册']
		};
	},
	methods: {
		change(e){
			console.log(e)
		}
	}
};
</script>

<style>
.tui-tabs__spacing {
	width: 100%;
	padding: 40rpx 0;
	box-sizing: border-box;
}
.tui-padding{
	padding: 40rpx 80rpx;
}
.tui-inner__box{
	width: 100%;
	height: 80rpx;
	background-color: #fff;
	border-radius: 40rpx;
	overflow: hidden;
}
</style>
